<template>
<!--人脸识别弹框页面-->
    <div class="wrapper">
        <div   class="block">
            <p style="margin-bottom:0.3rem ">请牢记下面的验证码</p>
            <p  class="count">此验证码将于<span style="color: red;">{{count}}</span>过期</p>
            <p  class="count" >用普通话朗读数字，视频时常 <span style="color: red;">3-8</span>秒最佳</p>
         <div class="number">
                <span v-for="(item,key) in number" :key="key"> {{item}}</span>
         </div>
            <div class="modal-wrapper" ref="blue">
                <p class="modal-confirm-btn">记住了，开始录制<span v-show="resce">({{num}})s</span></p>
                <input type="file" accept="video/*" name="video" @change="uploadVideo($event)" class="camera-input">
            </div>
            <p class="m-next" @click="delbox"></p>
        </div>
    </div>
</template>
<script>
    export default {
        name: "face",
        props:['star'],
        data(){
            return{
                sho:false,
                show:false,
                count: '',
                timer: null,
                number:[],
                num:"",
                time:null,
                resce:true,
                token:""
            }
        },
        async created() {
            this.goGrdoupRecor()
            this.getCode()
            //获取access_token值
            let data= {
                'grant_type':'client_credentials',
                'client_id':'WxtkbbxPV7PqA428ok8IFvyR',
                'client_secret':'0zHuhYAPGymGQmPFudKrdk944Qm0G7WB'
               }
          await this.$axios({
              method:'post',
              header:{
                  'Content-Type': 'application/x-www-form-urlencoded'
              },
                url:'/list/oauth/2.0/token',
                data: this.$qs.stringify(data),
            }).then(response=>{
                 console.log(response.data.access_token)
                 this.token = response.data.access_token
            }).catch(res=>{
                console.log(res)
          })
            //出现语音识别
        await this.$axios({
            method:'post',
            url:`/list/rest/2.0/face/v1/faceliveness/sessioncode?access_token=${this.token}`
            })
            .then(response=>{
                console.log(response)
                    if(response.data.error_code===0){
                        console.log(response)
                        this.number = response.data.result.code.split("")
                    }
                }).catch(res=>{
                console.log(res)
            })
        },
        methods:{
               delbox(){
                this.$emit('del',false)
                clearInterval(this.time);
            },
            //上传视频转为based4格式
            uploadVideo(e) {
        this.$emit("load",this.uploadVideo)
                let video = e.target.files[0];  //选择的文件
               let reader = new FileReader();
                reader.readAsDataURL(video);
                reader.onload = (e) =>{
                    let videoSrc= e.target.result;
                    let baseNum = videoSrc.split(',')[1]
                    let  base_={
                        video_base64:baseNum
                    }
                    this.$axios({
                        method:'post',
                        url:`/list/rest/2.0/face/v1/faceliveness/verify?access_token=${this.token}`,
                        header:{
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data:this.$qs.stringify(base_)
                    }).then(response=>{
                        console.log(response)
                        this.$emit('block',response.data)
                    }).catch(res=>{
                        console.log(res)
                    })
                }
            },
            //倒计时3秒
            goGrdoupRecor(){
                const TIME_COUNT = 3;
                if(!this.time){
                    this.num = TIME_COUNT;
                    this.show = false;
                    this.time = setInterval(()=>{
                        if(this.num > 0 && this.num <= TIME_COUNT){
                          if(this.number.length===0){
                              this.num=TIME_COUNT
                          }else{
                              this.num--;
                              console.log(this.num)
                              if(this.num===0){
                                  this.$refs.blue.style.background='#0073eb'   
                                  this.resce = false
                              }
                          }
                        }else{
                            this.show = true;
                            clearInterval(this.time);
                            this.time = null;
                        }
                    },1000)
                }
            },
            //倒计时60秒
            getCode(){
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            if(this.number.length===0){
                                this.count=TIME_COUNT
                                return false
                            }else{
                                this.count--;
                                this.$emit('count',this.count)
                                if(this.star){
                                    clearInterval(this.timer);
                                }
                            }
                        } else {
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            },
        },
    }
</script>

<style scoped lang="scss">
    .count{
        font-size: 0.28rem;
        color: #666;
    }
.number{
    margin:10% auto;
    span{
        font-size: 1rem;
        border-radius: 0.1rem;
        margin-left: 0.1rem;
        border: 0.01rem solid #ccc;
    }
}
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        display:-webkit-flex;
        height: 100%;
    }
    .modal-confirm-btn{
        font-size: 0.35rem;
        color: #fff;
        width: 100%;
        height: 100%;
        position: absolute;
        top:-1.5rem;
        left: 0;

    }
    .modal-color{
        background: #0073eb;
    }
    .modal-wrapper{
        background:#bcd2eb;
        height: 1rem;
        text-align: center;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        line-height: 4.083rem;
        position: absolute;
        width: 70%;
        margin-left: 15%;
        font-size: 0.3rem;
        bottom: 0.2rem
    }
    .camera-input{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .block {
        text-align: center;
        padding-top: 0.5rem;
        width: 6rem;
        height: 5rem;
        background-color: #fff;
        position: relative;
    .m-next{
        outline: none;
        position: absolute;
        width: 1rem;
        height: 1rem;
        left: 40%;
        bottom: -2rem;
        background: url(//aip.bdstatic.com/faceliveness/dist/1523595724898/images/icon_close.png) 0 0 no-repeat;
        -moz-background-size: 100% auto;
        background-size: 100% auto;
    }
    }
</style>